<template>
    <div class="box">
        <div class="null-page" v-show="yes"></div>
        <el-card class="box-card member-coupon">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
            </div>

            <div class="my-account" style="width: 800px">
                <el-form ref="form" :model="form" label-width="80px" class="el-form-i" :rules="rules">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="form.password" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nickname">
                        <el-input v-model="form.nickname" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名" prop="realname">
                        <el-input v-model="form.realname" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="form.mobile" label="请输入手机号" maxlength="11" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称" prop="branch_bank_name">
                        <el-input v-model="form.branch_bank_name" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="银行账号" prop="bank_account">
                        <el-input v-model="form.bank_account" maxlength="19" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="box-card member-coupon" style="height: 85px; padding-left: 25%">
            <el-form label-width="80px">
                <el-form-item>
                    <el-button type="primary" @click="onSubmit('form')">保存</el-button>
                    <el-button @click="cancel()">取消</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import moment from "moment"
import { addBusinessUser } from "@/api/member/construction"
export default {
    name: "construction",

    data: () => {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("手机号不能为空"))
            } else {
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(value)) {
                    callback()
                } else {
                    return callback(new Error("请输入正确的手机号"))
                }
            }
        }

        return {
            form: {
                username: "",
                password: "",
                nickname: "",
                mobile: "",
                realname:"",
                branch_bank_name: "",
                bank_account: ""
            },
            yes: true,
            rules: {
          
                realname: [{ required: true, message: "请输入真实姓名", trigger: "blur" }],
                username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
                branch_bank_name: [{ required: true, message: "请输入银行名称", trigger: "blur" }],
                bank_account: [{ required: true, message: "请输入银行账号", trigger: "blur" }],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
                mobile: [{ required: true, message: "请输入手机号", trigger: "blur" }]

            }
        }
    },
    mounted() {
        let self = this
        setTimeout(function () {
            self.yes = false
        }, 300)
    },
    methods: {
        onSubmit(form) {
            this.$refs[form].validate((valid) => {
             
                if (valid) {
                    var data = {
                        username:this.form.username,
                        password: this.form.password,
                        nickname: this.form.nickname,
                        realname: this.form.realname,
                        mobile: this.form.mobile,
                        branch_bank_name: this.form.branch_bank_name,
                        bank_account: this.form.bank_account
                    }

                  

                    addBusinessUser(data)
                        .then((res) => {
                            if (res.code == 0) {
                                this.$router.push({ path: "/member/zijiguanli" })
                            } 
                        }).catch((err) => {
              
                            this.$message.error(err.message)
                        })
                } else {
                    return false
                }
            })
        },
        cancel() {
            this.$router.push({ path: "/member/zijiguanli" })
        }
    }
}
</script>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: relative;
}
.el-form-i {
    display: inline-block;
    width: 400px;
    padding-left: 25%;
}

.null-page {
    width: 100%;
    height: 730px;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
}
</style>
